<template>
    <div>
<!--------------------------类型表的模态框--------------------->
        <el-dialog title="添加或修改数据字典" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="100px">
                <el-form-item label="字典名">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="字典编号">
                    <el-input v-model="form.sn" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateDept">确 定</el-button>
            </div>
        </el-dialog>

        <!--------------------------详情表的模态框--------------------->
        <el-dialog title="添加或修改明细" :visible.sync="dialogFormVisibleD">
            <el-form :model="form2" label-width="100px">
                <el-form-item label="明细名">
                    <el-input v-model="form2.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="form2" label-width="100px">
                <el-form-item label="编号">
                    <el-input v-model="form2.typesId" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleD = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateDetail">确 定</el-button>
            </div>
        </el-dialog>


        <el-form style="margin-top: 20px" size="mini" :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item label="类型名称">
                <el-input v-model="searchParam.name" placeholder="请输入类型名称"></el-input>
            </el-form-item>
            <el-form-item label="类型编号">
                <el-input v-model="searchParam.sn" placeholder="请输入类型编号"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="toQuery">查询</el-button>
                <el-button type="success" @click="dialogFormVisible = true">新增</el-button>
            </el-form-item>
        </el-form>

        <el-table
                border
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="主键ID"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="sn"
                    label="类型编号"
                    width="350">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="类型名称"
                    width="350">
                <template slot-scope="scope">
                    <span @dblclick="detail(scope.row.id)" style="margin-left: 10px">{{ scope.row.name }}</span>
<!-----------------------------------------------抽屉相关------------------------------------------------------------>
                    <el-drawer
                            title="数据字典明细"
                            :visible.sync="drawer"
                            :direction="direction"
                            :before-close="handleClose">

                        <span>

                              <el-table
                                      border
                                      ref="multipleTable"
                                      :data="tableDatal"
                                      tooltip-effect="dark"
                                      style="width: 100%"
                                      @selection-change="handleSelectionChange">
                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        prop="typesId"
                                        label="编号"
                                        width="120">
                                </el-table-column>

                                <el-table-column
                                        prop="name"
                                        label="明细名">
                                </el-table-column>

                                      <el-table-column >

                                          <template slot="header"  >
                                           <el-button
                                                   size="mini"
                                                   @click="dialogFormVisibleD = true;form2={}">新增</el-button>

                                          </template>

                                          <template  slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    @click="handleEditD(scope.row)">编辑</el-button>

                                            <el-popover
                                                    placement="top"
                                                    size="mini"
                                                    v-model="visible">
                                                <p>这是一段内容这是一段内容确定删除吗？</p>
                                                <div style="text-align: right; margin: 0">
                                                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                                                    <el-button type="primary" size="mini" @click="handleDeleteD(scope.row)">确定</el-button>
                                                </div>
                                                <el-button slot="reference" size="mini">删除</el-button>
                                            </el-popover>

                                        </template>

                                    </el-table-column>

                            </el-table>




                             <el-pagination style="margin-top: 20px"
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="searchParam.currPage"
                                            :page-sizes="[1, 2, 3, 4]"
                                            :page-size="searchParam.pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="totall">
                             </el-pagination>
                        </span>

                    </el-drawer>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">

                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>

                    <el-popover
                            placement="top"
                            width="160"
                            v-model="visible">
                        <p>这是一段内容这是一段内容确定删除吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                            <el-button type="primary" size="mini" @click="handleDeleteD(scope.row)">确定</el-button>
                        </div>
                        <el-button slot="reference">删除</el-button>
                    </el-popover>

                </template>
            </el-table-column>

        </el-table>
        <el-pagination style="margin-top: 20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="searchParam.currPage"
                       :page-sizes="[1, 2, 3, 4]"
                       :page-size="searchParam.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                query: {
                    typesId: 0,
                    currPage: 1,
                    pageSize: 10
                },
                tableDatal: [],
                totall: 0,

                options: [],
                form: {},//这个对象用于保存表单提交时的数据
                form2: {},//这个对象用于保存表单提交时的数据
                dialogFormVisible: false,
                dialogFormVisibleD: false,
                searchParam: {
                    currPage: 1,
                    pageSize: 10
                },
                total: 0,
                tableData: [],
                parentDepts: [],
                multiIdSelcts: [], // 用于保存复选框选中的值
                drawer: false,
                direction: 'rtl'
            }

        },
        methods: {
            handleDeleteD(row){
                this.$http.get('/detail/del?id=' + row.typesId).then(res => {

                    this.detail(row.typesId);

                })
                visible = false;
            },
            handleEditD(row){
                console.log(JSON.stringify(row));
                this.dialogFormVisibleD = true;
                this.form2 = row;
            },
            saveOrUpdateDetail(){

                this.$http.post('/detail/saveorupdate', this.form2).then(res => {
                    this.dialogFormVisibleD = false;
                    //this.detail(id);
                })
            },

            detail(id) {
                this.query.typesId = id;

                this.$http.post('/detail/pagelistbyid', this.query).then(res => {
                        //console.log(res);
                    this.tableDatal = res.data.data.rows;
                    this.totall = res.data.data.total;


                })
                this.drawer = true;

            },
            handleDelete(row) {

                this.$http.get('/type/del?id=' + row.id).then(res => {

                    this.toQuery();
                })
                visible = false;
            },
            handleEdit(row) {
                this.dialogFormVisible = true;
                this.form = row;

            },
            saveOrUpdateDept() {
                this.$http.post('/type/saveorupdate', this.form).then(res => {
                    this.dialogFormVisible = false;
                    this.toQuery();
                })
            },
            toQuery() {
                this.$http.post('/type/pagelist', this.searchParam).then(res => {
                    this.tableData = res.data.data.rows;
                    this.total = res.data.data.total;
                })
            },
            handleSelectionChange() {

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }

        },
        mounted() {
            this.toQuery();

        }

    }

</script>



